<template>
  <div class="set-message">
    <div class="set-name">
        <div class="mui-input-row">
        <label>姓名</label>
        <input type="text" v-model="userName" class="mui-input-clear" placeholder="请填写真实姓名">
    </div>
    </div>
    <div class="set-content">
        <h5>介绍自己</h5>
        <textarea v-model="text" placeholder="向支持者介绍一下你自己，这样有助于拉近你与支持者之间的距离，100字以内"></textarea>
        <p>注：信息一旦提交将不能修改，请认真填写再提交</p>
    </div>
    <div class="set-btn">
        <button @click="submit">提交</button>
    </div>
</div>
</template>
<script>
export default {
    data() {
        return {
            name: '完善活动信息',
            userMessage: {},
            userName: '',
            text: ''
        }
    },
    created() {
        document.title = this.name
        // 获取用户基本信息
        this.utils.$get(this.utils.GET_USER_mESSAGE, data => {
            this.userMessage = data.data
        })
    },
    methods: {
        // 提交信息

        submit() {
            if (!/^[a-zA-Z\u4E00-\u9FA5]{2,25}$/.test(this.userName)) {
                mui.toast('请输入正确的姓名')
                return
            }
            if (this.text<10 || this.text>300) {
                mui.toast('请输入正确的自我介绍')
                return
            }
            let userData = {
                id: this.$route.params.activeId,
                userName: this.userName,
                userTel: this.userMessage.userTel,
                activityNumber: 1,
                userIntroduction: this.text
            }
            this.utils.$post(
                this.utils.SET_CHIPS_MESSAGE,
                data => {
                    if (data.data == 1 || data.data == 0) {
                        this.$router.push({
                            path: '/apply/' + this.$route.params.activeId
                        })
                    }
                },
                userData
            )
        }
    }
}
</script>

<style lang="less">
.set-message {
    min-height: 8rem;
    .set-name {
        padding: 0.2rem 0;
        background-color: #f6f6f6;
        .mui-input-row {
            padding: 0.2rem;
            background-color: #fff;
            > label {
                width: 65%;
            }
            > input {
                width: 35%;
            }
        }
    }
    .set-content {
        background-color: #fff;
        padding: 0.2rem 0.24rem 0.4rem;
        > h5 {
            color: #333;
            padding: 0.2rem 0;
        }
        > textarea {
            background-color: #f6f6f6;
            height: 4rem;
            padding: 0.2rem;
            border: none;
            font-size: 0.28rem;
            line-height: 0.42rem;
        }
        > p {
            padding: 0.2rem 0 0.3rem;
            font-size: 0.28rem;
        }
    }
    .set-btn {
        width: 100%;
        padding: 0 0.24rem;
        margin-top: 3.33rem;
        > button {
            height: 0.8rem;
            background-color: #00d8c9;
            text-align: center;
            width: 100%;
            border-radius: 0.4rem;
            color: #fff;
            font-size: 0.36rem;
        }
    }
}
</style>
